/***框架布局***/
*,
*:before,
*:after {
	box-sizing: inherit;
}


/*==顶部==*/
.header{height: 82px; background:#fff}
.header .top{padding:2px 7px 7px;line-height: 24px;}
.header .top a{ float:right;padding-left: 23px;color:#929292;font-size:12px;display: inline-block;margin:0 10px;background: url(../images/icoA.png) no-repeat;}
.header .top a:hover{color:#63cae8}
.header .top b{float:right;margin:0 20px 0 0 ;font-size:18px;padding-left:30px;font-style:oblique;font-weight:bold;color:#ff0100;background: url(../images/icoA.png) 0 -5px no-repeat;}
.header .top .weibo{background-position: 0 -30px;}
.header .top .weixin{ position:relative;background-position: 0px -54px;}
.header .top .lianxi{background-position: 0 -76px;}
.header .top .liuyan{background-position: 0 -100px;}
.header .top .weixin img{  position: absolute; top:100%; left:-10px;z-index:999; display: none;padding:5px; border: 1px #ddd solid; background: #fff;}
.header .top .weixin:hover img{ display:block;width:100px;}
.header .long{}
.header .long .logo{position:absolute;top: 5px;padding: 0px 20px 0px 20px;background:#fff;}
.header .long .logo img{height:70px;}
.header .long .nav{margin: 6px 0 20px 0;}
.header .long .nav li{float:left;margin: 0 20px;}
.header .long .nav li a{
	position: relative;
	display: block;
	color:#000000;
	font-size: 18px;
	-webkit-transition: color .2s ease-in-out;
	transition: color .2s ease-in-out;
	}
.header .long .nav li a:hover,.header .long .nav li.active a{color:#ec0000}
.header .long .nav li a:before {content: "";display: block;position: absolute;bottom: -15px;left:0;width: 0;height:3px;background:#ec0000;-webkit-transition: width .2s ease-in-out;transition: width .2s ease-in-out;}
.header .long .nav li a:hover:before {width:100%;}
.header .long .nav li.active a:before{width:100%;}

.fixed1{}
.fixed2{position:fixed;_position:absolute;top:0;  border-bottom:#ddd solid 1px; z-index:250;}



/*==标题==*/
.titleAx{ margin:20px 0;color:#000000; font-size:30px; text-align:center}
.titleAx span{ display:block;margin:5px 0 0 0;color:#bdbdbd; font-size:20px; text-transform:Uppercase}


/*==首页==*/
.homeA{padding:50px 0;background: url(../images/bg05.png) no-repeat center top;}
.homeA .slideTxtBox{ width:1200px;  height:530px; }
.homeA .slideTxtBox .hd{margin: 20px 0;}
.homeA .slideTxtBox .hd ul{  text-align: center;   }
.homeA .slideTxtBox .hd ul li{position: relative;display: inline-block;color:#4d4d4d;font-size:14px;margin: 0 15px;cursor:pointer;-webkit-transition: color .2s ease-in-out;transition: color .2s ease-in-out;}
.homeA .slideTxtBox .hd ul li:hover{color:#63cae8}
.homeA .slideTxtBox .hd ul li:before {content: "";display: block;position: absolute;bottom: -10px;left:0;width: 0;height:3px;background:#63cae8;-webkit-transition: width .2s ease-in-out;transition: width .2s ease-in-out;}	
.homeA .slideTxtBox .hd ul li:hover:before {width:100%;}
.homeA .slideTxtBox .hd ul li.on{color:#63cae8}
.homeA .slideTxtBox .hd ul li.on:before {width:100%;}
.homeA .slideTxtBox .bd{ margin:20px 0 0 0}
.homeA .slideTxtBox .bd ul{ zoom:1;  }
.homeA .slideTxtBox .bd li{float:left;width: 280px;margin: 0 10px 20px 10px;}
.homeA .slideTxtBox .bd li img{max-width:100%;}
.homeA .slideTxtBox .bd li h4{position: relative;padding: 10px 10px 10px 20px;color:#fff;font-size:14px;line-height: 26px;
background:#979797;
}
.homeA .slideTxtBox .bd li h4 em{float:right;width: 28px;height: 26px;display:inline-block;background: url(../images/icoA.png) 0 -132px no-repeat;}
.homeA .slideTxtBox .bd li a:hover h4{  background: none;    }

  
/*b*/
.homeB{}
.homeB .titleAx{margin:0px; padding:40px 0; background: #63cae8;color:#fff}
.homeB .titleAx span{color:#fff}
.homeB .slideBox{ width:100%;  overflow:hidden; position:relative; border:1px solid #ddd;  }
.homeB .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.homeB .slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
.homeB .slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.homeB .slideBox .hd ul li.on{ background:#f00; color:#fff; }
.homeB .slideBox .bd{position:relative;z-index:0;}
.homeB .slideBox .bd li{width:100%;zoom:1;vertical-align:middle;}
.homeB .slideBox .bd li a{ position: relative;float:left; display: inline-block; width:25%;/*height:300px;*/}
.homeB .slideBox .bd li a .box{ opacity:0; position: absolute; left:20px; top:20px;right:20px;bottom:20px;  background:rgba(0,0,0,0.8); padding:20px;}
.homeB .slideBox .bd li a .box h4{opacity:0;margin:0 0 10px 0;color:#fff; font-size:20px;transform:translateY(20px);}
.homeB .slideBox .bd li a .box p{opacity:0; font-size:14px;color:#b2b2b2;transform:translateY(50px);}
.homeB .slideBox .bd li a:hover .box h4{opacity:1;transform:translateY(0px);}
.homeB .slideBox .bd li a:hover .box p{opacity:1;transform:translateY(0px);}
.homeB .slideBox .bd li a .box .bor{ padding:20px;height:100%; z-index:9}
.homeB .slideBox .bd li a:hover .box{ opacity:1}
.homeB .slideBox .bd img{display:block;max-width:100%;width:100%;height: 100%;}
.homeB .down{background: #282828;padding: 20px 0;}
.homeB .down .pos{ position: relative;}
.homeB .down .middle{display: table;margin:auto;color:#fff;font-size:14px;}
.homeB .down .middle:hover{ color:#63cae8}
.homeB .down .middle:before{content: "";width: 470px;height: 1px;background: #949494;display: block;position: absolute;left: 40px;top: 10px;z-index:1}
.homeB .down .middle:after{content: "";width: 470px;height: 1px;background: #949494;display: block;position: absolute;right: 40px;top: 10px;z-index:1}
.homeB .slideBox .prev,
.homeB .slideBox .next{position:absolute;left:0;top: -10px;display:none;width: 24px;height: 41px;background: url(../images/icoB.png) 0px -2px no-repeat;}
.homeB .slideBox .next{left:auto;right:0;background-position: -22px -2px;}
.homeB .slideBox .prev:hover,
.homeB .slideBox .next:hover{ background-position:0px -44px;  }
.homeB .slideBox .next:hover{ background-position:-22px -44px;  }
.homeB .slideBox .prevStop{ display:none;  }
.homeB .slideBox .nextStop{ display:none;  }
/*c*/
.homeC{margin:0 0 20px 0;padding: 125px 0 0 0;background: url(../images/bg01.jpg) no-repeat center top;}
.homeC .tone{padding: 70px 70px 35px 150px;background: #63cae8  url(../images/ico03.png) 40px 49px no-repeat;}
.homeC .tone h2{color:#f0f0f0; font-size:50px;}
.homeC .tone .wx{color:#fff;font-size:14px;margin: 20px 0;line-height: 25px;}
.homeC .tone a{float:right;margin:10px 0 0 0; padding-right:180px;display: block; color:#fff; font-size:14px;background: url(../images/ico04.png) no-repeat right}
.homeC .down{ border-bottom:1px #ddd solid ;padding:40px 0 40px 0;background:#fff}
.homeC .down li{float:left;margin:0 70px; text-align: center;}
.homeC .down li.x2{ margin:0 245px;}
.homeC .down li span{ line-height:60px;color:#63cae8; font-size:85px;}
.homeC .down li b{ vertical-align:top;color:#a8a8a8; font-size:12px;}
.homeC .down li h5{margin-top:10px;color:#a8a8a8; font-size:12px;}
/*d*/
.homeD{margin:0px 0 50px 0;}
.homeD ul{float:left;width:100%;}
.homeD .one{ position:relative;float:left;width:540px; height:341px;}
.homeD .one img{ display: block;width:540px; height:341px;}
.homeD .one h4{ opacity: 0; position: absolute; left:0; bottom: 0;padding:15px; color:#fff; font-size:14px;width:100%; background: rgba(0,0,0,0.5); text-align: center;}
.homeD .one:hover h4{ opacity: 1;}
.homeD .two{float:right;width:635px;margin: 0 0 15px 0;/* padding: 10px; */}
.homeD .two a{float:left;width:100%;display:block;padding: 17px 15px;background: #f4f4f4;}
.homeD .two a:hover{ background: none;}
.homeD .two h3{float:left;width:80px; text-align:center;color:#444444; font-size:12px;}
.homeD .two h3 b{ display:block;color:#444444; font-size:40px;}
.homeD .two .frame{float:right;width: 515px;}
.homeD .two .frame h4{margin:0 0 5px 0;color:#444; font-size:14px;}
.homeD .two .frame p{font-size:12px;color:#a5a5a5}
.homeD .two a:hover h3,.homeD .two a:hover h3 b,.homeD .two a:hover .frame h4{color:#ffffff}
.homeD .two a:hover .frame p{color:#b7efff}
.homeD .more{ display:table; border-radius:5px ; margin:30px auto 0;font-size:14px; border: 1px #63cae8 solid;color:#63cae8;padding:10px 25px;}
.homeD .more:hover{  border:1px solid #177a97;color:#fff; background: #177a97;}




.rack .lefter .product-groom{margin:20px 0;width:100%; border:1px #ddd solid}
.rack .lefter .product-groom h3{color:#fff; background:#177a97;font-size:15px;padding:15px 0; text-align:center; font-weight:bold;}
.rack .lefter .product-groom .box{padding:10px 10px;}
.rack .lefter .product-groom .box a{ display:block; color:#666;font-size:12px; line-height:35px; border-bottom:1px #ddd dashed}
.rack .lefter .product-groom .box a:hover{color:#177a97;}


/*==产品列表==*/
.list-product li{float:left;width: 290px;margin: 0 10px 20px 10px;}
.list-product li img{max-width:100%;height:182px;}
.list-product li h4{padding: 10px 10px 10px 20px;color:#fff;font-size:14px;background:#979797;line-height: 26px;}
.list-product li h4 em{float:right;width: 28px;height: 26px;display:inline-block;background: url(../images/icoA.png) 0 -132px no-repeat;}
.list-product li a:hover h4{ background: none;}


/*==底部==*/
.footer{background:#63cae8;padding: 30px 0 20px 0;}
.footer .nav{float:left;width: 620px;}
.footer .nav li{float:left;margin: 0 70px 0 0;}
.footer .nav li:nth-child(2){display: none;}
.footer .nav li:nth-child(3){display: none;}
.footer .nav li:nth-child(4){display: none;}
.footer .nav li h3{color:#fff; font-size:14px;}
.footer .nav li a{  line-height:25px;display: block; color:#fff; font-size:12px;}
.footer .nav li a:hover{color:#ddd}
.footer .middle{width: 280px;text-align:center;}
.footer .middle b{color:#fff; font-size:23px;}
.footer .middle span{  margin:10px 0; display: block; color:#fff; font-size:12px;}
.footer .middle a{color:#fff;font-size:12px;background: #177a97;padding:10px 20px;display: table;margin: auto;}
.footer .middle a:hover{ background: #135A6F;}

.footer .right{width: 280px;}
.footer .right .box{float:left; margin:0 0 0 20px;}
.footer .right .box img{ width:100px}
.footer .right .box h4{ line-height: 25px; color:#fff; font-size:12px; text-align: center;}
.footer .copy{margin:40px 0 20px 0;color:#fff; font-size:12px; text-align:center; line-height: 25px;}
.footer .copy a{color:#fff; font-size:12px; }
.footer .copy a:hover{color:#ddd}
.footer .link{margin:30px 0 0 0;}
.footer .link h3{ float:left;color:#fff; font-size:14px;}
.footer .link a{ display:inline-block;color:#fff;font-size:12px;margin:0 10px; }
.footer .link a:hover{color:#ddd}


/*  内页左侧 */
.recommend_pro{margin:20px 0}
.left_title{background:#177a97;height:50px; line-height:50px; font-size: 16px;color: #fff; text-align: center;}
.recommend_slide{height:402px;overflow:hidden;padding:9px;border:1px solid #177a97;background:#fff;border-top:none; }
.recommend_pro li{ width:220px;overflow:hidden;margin-bottom:10px;}
.recommend_pro li img{ width:212px; height:148px; border:1px solid #ddd;padding:2px;transition: all .5s}
.recommend_pro li span{height:30px; line-height:30px; position:relative; text-align:center;display: block;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
.recommend_pro li:hover img{border-color: #004aa6;}
.recommend_pro li:hover  span{color: #177a97}
.twoCont{padding:15px 10px;overflow:hidden;background:#f4f4f4;}


/*--按钮效果--*/
*:before,
*:after {
  z-index: -1;
}
@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 650px;
    height: 650px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 650px;
    height: 650px;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 650px;
    height: 650px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 650px;
    height: 650px;
  }
}
[class^="btn-"] {
  position: relative;
  display: block;
  width: 100%;
  text-transform: uppercase;
  overflow: hidden;
}  
.btn-11 {
  position: relative;
}
.btn-11:before, .btn-11:after {
  position: absolute;
  top: 50%;
  content: '';
  width: 20px;
  height: 20px;
  background: #63cae8;
  border-radius: 50%;
}
.btn-11:before {
  left: -20px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*     animation: criss-cross-left 0.8s reverse; */
}
.btn-11:after {
  right: -20px;
  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  /*     animation: criss-cross-right 0.8s reverse; */
}
.btnBox a:hover .btn-11:before,.btnBox .btn-11:hover:before,.btnBox a:hover .btn-11:after,.btnBox .btn-11:hover:after {
  /*       @include size($btn-width); */
}
.btnBox a:hover .btn-11:before,.btnBox .btn-11:hover:before{
  -webkit-animation: criss-cross-left 0.8s both;
          animation: criss-cross-left 0.8s both;
}
.btnBox a:hover .btn-11:after,.btnBox .btn-11:hover:after {
  -webkit-animation: criss-cross-right 0.8s both;
          animation: criss-cross-right 0.8s both;
}


/*--线条效果--*/
.button {
  position: relative;
  cursor: pointer;

}
.button .inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.button:nth-of-type(1):before, .button:nth-of-type(1):after, .button:nth-of-type(1) .inner:before, .button:nth-of-type(1) .inner:after {
  background-color: #ffffff;
}
.button:nth-of-type(2):before, .button:nth-of-type(2):after, .button:nth-of-type(2) .inner:before, .button:nth-of-type(2) .inner:after {
  background-color: #26a69a;
}
.button:nth-of-type(3):before, .button:nth-of-type(3):after, .button:nth-of-type(3) .inner:before, .button:nth-of-type(3) .inner:after {
  background-color: #7e57c2;
}
.button:before, .button:after, .button .inner:before, .button .inner:after {
  position: absolute;
  content: "";
  display: block;
  -webkit-transition: -webkit-transform 0.9s;
  transition: -webkit-transform 0.9s;
  transition: transform 0.9s;
  transition: transform 0.9s, -webkit-transform 0.9s;
}
.button.horizontal:before, .button.horizontal:after, .button.both:before, .button.both:after {
  left: 0;
  width: 100%;
  height: 1px;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.button.horizontal .inner:before, .button.horizontal .inner:after, .button.both .inner:before, .button.both .inner:after {
  top: 0;
  width: 1px;
  height: 100%;
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.button.horizontal .inner:before, .button.both .inner:before {
  left: 0;
}
.button.horizontal .inner:after, .button.both .inner:after {
  right: 0;
}
.button.horizontal .inner:hover:before, .button.horizontal .inner:hover:after, .button.both .inner:hover:before, .button.both .inner:hover:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.horizontal:before, .button.both:before {
  top: 0;
}
.button.horizontal:after, .button.both:after {
  bottom: 0;
}
.button.horizontal:hover:before, .button.horizontal:hover:after, .button.both:hover:before, .button.both:hover:after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.button.horizontal:hover .inner:before, .button.horizontal:hover .inner:after, .button.both:hover .inner:before, .button.both:hover .inner:after {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.button.horizontal.clockwise .inner:before, .button.both.clockwise .inner:before {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}
.button.horizontal.clockwise .inner:after, .button.both.clockwise .inner:after {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.clockwise:before, .button.both.clockwise:before {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}
.button.horizontal.clockwise:after, .button.both.clockwise:after {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}
.button.horizontal.clockwise:hover .inner:before, .button.both.clockwise:hover .inner:before {
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
}
.button.horizontal.clockwise:hover .inner:after, .button.both.clockwise:hover .inner:after {
  -webkit-transform-origin: top center;
          transform-origin: top center;
}

.codepen-link {
  position: absolute;
  bottom: 30px;
  right: 30px;
  height: 40px;
  width: 40px;
  z-index: 10;
  border-radius: 50%;
  box-sizing: border-box;
  background-image: url("");
  background-position: center center;
  background-size: cover;
  opacity: 0.5;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.codepen-link:hover {
  opacity: 0.8;
  box-shadow: 0 0 6px #efefef;
}